<template>
    <view class="news-con">
        <header-vue :back="true" title="消息通知" titleSize="32rpx" titleColor="#333" id="headerH"></header-vue>
        
        <scroll-view 
            class="scroll-area" 
            scroll-y 
             :style="{'height':sH + 'px'}"
            :refresher-enabled="true"
            :refresher-triggered="refreshing"
            refresher-background="transparent"
            @refresherrefresh="onRefresh"
            :lower-threshold="100">
            
            <view class="list-wrap">
                <view class="notification-card" v-for="item in list" :key="item.id" @click="goToDetail(item)">
                    <view class="card-icon" :style="{ backgroundColor: item.iconColor }">
                        <u-image :src="item.icon" width="81rpx" height="81rpx" mode="aspectFill"></u-image>
                    </view>
                    <view class="card-content">
                        <view class="card-title">{{ item.title }}</view>
                        <view class="card-desc">{{ item.content }}</view>
                    </view>
                    <view class="card-time">{{ formatTime(item.time) }}</view>
                </view>
                
                <view class="load-more" v-if="loading">
                    <u-loading-icon mode="circle" size="24"></u-loading-icon>
                    <text class="load-text">加载中...</text>
                </view>
                <view class="empty" v-if="!loading && list.length === 0">
                    <text class="empty-text">暂无消息</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import headerVue from '@/components/header.vue';

export default {
    components: {
        headerVue
    },
    data() {
        return {
            list: [],
            refreshing: false,
            loading: false,
            page: 1,
            pageSize: 10,
            sH: 0
        }
    },
    onLoad() {
        this.loadData()
    },
    mounted() {
        // 获取系统信息计算高度，兼容App端
        const systemInfo = uni.getSystemInfoSync()
        // App端使用screenHeight，H5端使用windowHeight
        const screenHeight = systemInfo.screenHeight || systemInfo.windowHeight
        const statusBarHeight = systemInfo.statusBarHeight || 0
        
        // 延迟执行确保DOM渲染完成，App端需要更长时间
        setTimeout(() => {
            const q = uni.createSelectorQuery().in(this)
            q.select('#headerH').boundingClientRect()
             .exec(rects => {
                const headerRect = rects[0]
                const headerHeight = headerRect ? headerRect.height : 88
                
                // App端计算：屏幕高度 - 状态栏 - header
                const calc = screenHeight - headerHeight
                
                this.sH = calc > 0 ? calc : screenHeight - statusBarHeight
              })
        }, 200) // App端需要更长的延迟
    },
    methods: {
        loadData() {
            this.loading = true
            setTimeout(() => {
                const mockData = this.getMockData()
                this.list = mockData
                this.loading = false
            }, 500)
        },
        getMockData() {
            const now = new Date()
            return [
                {
                    id: 1,
                    title: '平台公告',
                    content: '公告内容内容内容内容内容内容内容内容',
                    time: new Date(now.getTime() - 30 * 1000), // 30秒前
                    icon: '/static/index/news_icon1.png',
                    iconColor: '#FF4D4F'
                },
                {
                    id: 2,
                    title: '缴费通知',
                    content: '您的2025年度物业账单已产生,请尽快完...',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    icon: '/static/index/news_icon2.png',
                    iconColor: '#FF9500'
                },
                {
                    id: 3,
                    title: '积分消息',
                    content: '您的生活积分将于×天后失效,请尽快兑换',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    icon: '/static/index/news_icon3.png',
                    iconColor: '#1890FF'
                },
                {
                    id: 4,
                    title: '订单通知',
                    content: '您的上门维修订单师傅已经完成,请尽快...',
                    time: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000), // 2天前
                    icon: '/static/index/news_icon4.png',
                    iconColor: '#52C41A'
                },
                {
                    id: 5,
                    title: '审核通知',
                    content: '您的商家入驻申请已通过,请尽快下载...',
                    time: new Date(now.getTime() - 45 * 1000), // 45秒前
                    icon: '/static/index/news_icon5.png',
                    iconColor: '#13C2C2'
                }
            ]
        },
        formatTime(time) {
            const now = new Date()
            const diff = now.getTime() - time.getTime()
            
            // 小于1分钟
            if (diff < 60 * 1000) {
                return '刚刚'
            }
            
            // 小于1小时
            if (diff < 60 * 60 * 1000) {
                const minutes = Math.floor(diff / (60 * 1000))
                return `${minutes}分钟前`
            }
            
            // 小于24小时
            if (diff < 24 * 60 * 60 * 1000) {
                const hours = Math.floor(diff / (60 * 60 * 1000))
                return `${hours}小时前`
            }
            
            // 超过24小时，显示日期
            const year = time.getFullYear()
            const month = String(time.getMonth() + 1).padStart(2, '0')
            const day = String(time.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        goToDetail(item) {
            console.log('查看详情:', item)
            // 跳转到详情页
            uni.navigateTo({ url: `/views-master/home/news/news-list?id=${item.id}` })
        },
        onRefresh() {
            this.refreshing = true
            setTimeout(() => {
                this.page = 1
                this.loadData()
                this.refreshing = false
            }, 1000)
        },
    }
}
</script>

<style lang="scss" scoped>
.news-con {
    width: 100%;
    height: 100%;
    background: #F6F6F6;
}

.list-wrap {
    padding: 24rpx;
}

.notification-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 28rpx;
    margin-bottom: 28rpx;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.card-icon {
    width: 81rpx;
    height: 81rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.card-content {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
}

.card-desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.card-time {
    font-size: 20rpx;
    color: #999;
    margin-left: 16rpx;
    flex-shrink: 0;
    white-space: nowrap;
}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
}

.load-text {
    margin-left: 8rpx;
    color: #999;
    font-size: 24rpx;
}

.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48rpx 0;
}

.empty-text {
    color: #999;
    font-size: 26rpx;
}
</style>